<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新品 专题 优惠券</title>

    <link rel="stylesheet" th:href="@{assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">

    <script crossorigin="anonymous"
            integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g=="
            src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" th:href="@{assets/css/bootstrap.css}">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
    <script src="assets/js/bootstrap.js"></script>
</head>

<style>
    .discount:hover {
        cursor: pointer;
        color: red;
    }

    .discountStyle {
        border-radius: 5px;
        border-bottom: 2px dashed rgb(235 136 130);
        width: 88%;
        height: 80px;
        background-color: rgb(246, 246, 246);
        margin: 4px 17px;
    }

    .grid_list .product .context {
        display: block;
        max-height: 2em;
        line-height: 1em;
        word-break: break-word;
        overflow: hidden;
    }


    .news-img {
        position: relative;
    }

    .news-img > img {
        margin-top: 10px;
        height: 150px;
        margin-bottom: 20px;
    }

    .news-img > img:hover {
        transform: scale(1.1);
    }

    .news-content {
        display: inline-block;
        width: 12em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .news-content:hover {
        color: red;
    }

    .new-new {
        width: 40px;
        height: 20px;
        position: absolute;
        left: 50%;
        top: 10px;
        background-color: rgb(237 79 79);
        color: rgb(249 246 246);
        border-radius: 10px;
        font-weight: bolder;
    }

    .carousel {
        position: initial;
    }
</style>

<body>

<div th:fragment="newSubjectrCoupon" class="section section-margin mt-0 mb-0 text-center">
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="padding: 10px 5px 10px 25px;">
                <div class="text-center" >
                    <h2 style="font-weight: bold">新品推荐</h2>
                </div>
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="4000"
                     style="margin: 20px 0px">
                    <!-- Wrapper for slides -->
                    <div  class="carousel-inner" role="listbox">
                        <!--/*@thymesVar id="newRecommendProducts" type="java.util.List<cn.hx.mall_goods.entity.HomeNewProduct>"*/-->
                        <div th:each="news : ${newRecommendProducts}"   th:class=" ${newsStat.index eq 1?'active item text-center':'item text-center'}">
                            <!--/*@thymesVar id="products" type="java.util.List<cn.hx.mall_goods.entity.Product>"*/-->
                            <a  th:each="product : ${products}"  th:if="${product.id eq news.productId}"
                            th:href="'ywt-product?id='+${product.id}">
                                <div class="news-img">
                                    <img th:src="${product.pic}">
                                    <div class="new-new">NEW</div>
                                </div>
                                <div>
                                    <p style="margin-bottom: 0">
                                        <span class="news-content" th:text="${news.productName}"></span>
                                    </p>
                                    <div style="color: red;">
                                        ￥
                                        <span style="font-size: 18px" th:text="${product.price}"></span>
                                        元
                                    </div>

                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <div class="col-md-4" style="padding:10px 0">
                <!--/*@thymesVar id="recommendSubjects" type="java.util.List<cn.hx.mall_goods.entity.Subject>"*/-->
                <div class="text-center" >
                    <h2 style="font-weight: bold">专题推荐</h2>
                </div>
                <div class="subject">

                    <span  th:each="subject : ${recommendSubjects}" onclick="xzSubject(this)" th:text="${subject.title}" th:id="'subject'+${subject.id}"
                           th:style="${subjectStat.index eq 0?'background-color: rgb(0,196,204);':''}"></span>
                    &emsp;
                </div>
                <div th:each="subject : ${recommendSubjects}" th:style="'margin: 0px 0px;height: 260px;'+${subjectStat.index eq 0?'display:block':'display:none'}" th:id="'subject'+${subject.id}" class="row shop_wrapper grid_list" >
                    <!-- Single Product Start -->
                    <!--/*@thymesVar id="allProducts" type="java.util.Map<java.lang.Long,java.util.List<cn.hx.mall_goods.entity.Product>>"*/-->
                    <div th:each="subjectId : ${allProducts}" th:if="${subject.id eq subjectId.key}" class="col-12 product" >
                        <div th:each="value : ${subjectId.value}" class="col-12 product" style="margin: 10px 0;padding: 5px 16px;height: 96px">
                            <a th:href="'ywt-product?id='+${value.id}">
                                <div style="float: left;width: 25%">
                                    <img class="fit-image contact-block" th:src="${value.pic}"/>
                                </div>
                                <div class="content1" style="float: left;margin-left: 2%;margin-top: 2%;width: 66%;">
                                    <span class="context" th:text="${value.subTitle}"></span>
                                    <span style="color: red;display: block;margin-top: 6%;">
                                      ￥<big th:text="${value.price}"></big> 元
                                  </span>
                                </div>
                            </a>
                        </div>
                    </div>
<!--                    <div th:each="subjectId : ${allProducts}" th:if="${ subject.id eq subjectId.key}" class="col-12 product" style="margin: 4px 0;padding: 0 16px;height: 45%">-->
<!--                        <a th:href="'ywt-product?id='+${subjectId.value[1].id}">-->
<!--                            <div style="float: left;width: 25%">-->
<!--                                <img class="fit-image contact-block" th:src="${subjectId.value[1].pic}"/>-->
<!--                            </div>-->
<!--                            <div class="content1" style="float: left;margin-left: 2%;margin-top: 2%;width: 66%;">-->
<!--                                <span class="context" th:text="${subjectId.value[1].subTitle}"></span>-->
<!--                                <span style="color: red;display: block;margin-top: 6%;">-->
<!--                                     ￥<big th:text="${subjectId.value[1].price}"></big> 元-->
<!--                                  </span>-->
<!--                            </div>-->
<!--                        </a>-->
<!--                    </div>-->
                </div>
            </div>
            <div class="col-md-4" style="padding:10px 0">
                <!--                标题-->
                <h2 style="text-align: center;font-weight: bold">领券中心</h2>
                <!--                体-->
                <div style="border-radius: 10px;width: 80%;height: 267px;background-image: url('/assets/images/bg/bg-1.jpg');margin: 0 auto;overflow: hidden">
                    <!--                    优惠券-->
                    <a th:href="@{selectAllCoupon}">
                        <div class="discount discountStyle" style="position:relative;top: 3px">
                            <div style="display: inline-block;position: relative">
                            <span style="display: inline-block;color: red;position: absolute;top: -5px;left: 0px">
                                <span style="font-size: 12px">￥</span><span
                                    style="display: inline-block; font-size: 20px;font-weight: bold">100</span>
                            </span><br>
                                <span style="color:rgba(0,0,0,0.4); font-size: 12px;position: absolute; top: 28px;left: 0px;">满1000.00元可用</span><br>
                                <span style="font-size: 13px;">仅可购买京东数码部分商品</span><br>
                            </div>
                            <div id="font1" style="display: inline-block;margin-left: 20px;width: 10px;height: 80px">
                                <p style="font-size: 12px">更多好券</p>
                            </div>
                            <div id="font2"
                                 style="margin-left: 10px;height: 100%;display: inline-block;position: absolute;top: 30px">
                                <p> &gt; </p>
                            </div>
                        </div>
                    </a>

                    <a th:href="@{selectAllCoupon}">
                        <div class="discount discountStyle" style="position:relative;top: 6px">
                            <div style="display: inline-block;position: relative">
                            <span style="display: inline-block;color: red;position: absolute;top: -5px;left: 0px">
                                <span style="font-size: 12px">￥</span><span
                                    style="display: inline-block; font-size: 20px;font-weight: bold">5</span>
                            </span><br>

                                <span style="color:rgba(0,0,0,0.4); font-size: 12px;position: absolute; top: 28px;left: 0px;">满50.00元可用</span><br>
                                <span style="font-size: 13px;">仅可购买京东通用全部商品</span><br>
                            </div>
                            <div style="display: inline-block;margin-left: 20px;width: 10px;">
                                <p style="font-size: 12px">更多好券</p>
                            </div>
                            <div style="margin-left: 10px;height: 100%;display: inline-block;position: absolute;top: 30px">
                                <p> &gt; </p>
                            </div>
                        </div>
                    </a>

                    <a th:href="@{selectAllCoupon}">
                        <div class="discount discountStyle" style="position:relative;top: 9px">
                            <div style="display: inline-block;position: relative">
                            <span style="display: inline-block;color: red;position: absolute;top: -5px;left: 0px">
                                <span style="font-size: 12px">￥</span><span
                                    style="display: inline-block; font-size: 20px;font-weight: bold">99</span>
                            </span><br>

                                <span style="color:rgba(0,0,0,0.4); font-size: 12px;position: absolute; top: 28px;left: 0px;">满1100.99元可用</span><br>
                                <span style="font-size: 13px;">仅可购买京东小米部分商品</span><br>
                            </div>
                            <div style="display: inline-block;margin-left: 20px;width: 10px;">
                                <p style="font-size: 12px">更多好券</p>
                            </div>
                            <div style="margin-left: 10px;height: 100%;display: inline-block;position: absolute;top: 30px">
                                <p> &gt; </p>
                            </div>
                        </div>
                    </a>
                </div>

            </div>
            <script>
                function xzSubject(e) {
                    $(".subject").nextAll().each(function (i,j) {
                        $(j).css("display","none");
                        if(e.id==j.id){
                            $(e).css("background-color","rgb(0,196,204)");
                            $(e).siblings().css("background-color","#efefec");
                            $(j).css("display","block");

                        }
                    })
                }
            </script>
        </div>
    </div>
</div>
</div>

</body>
</html>